<!--
 * @description 小组审核详情
 * @author dumeng
 * @date 2021/9/17
 -->
<template>
  <section class="group-check-detail">
    <section class="check-main">
      <el-card class="main-card">
        <section slot="header" class="clearfix">
          <span v-if="obj.commitType==='TYPE_XZCL' || obj.commitType==='TYPE_XZXG'">小组信息</span>
          <span v-if="obj.commitType==='TYPE_CYSH'">成员信息</span>
          <span v-if="obj.commitType==='TYPE_XZJS'">解散小组</span>
          <span v-if="obj.commitType==='TYPE_XZYJ'">移交小组</span>
        </section>
        <!-- 小组成立 -->
        <section v-if="obj.commitType==='TYPE_XZCL' || obj.commitType==='TYPE_XZXG'" class="card-info">
          <section class="info-item">
            <div class="item-label">小组名称：</div>
            <div class="item-content" v-html="filterText(obj.groupNameOld,obj.groupName)" />
          </section>
          <section v-if="obj.commitType==='TYPE_XZCL'" class="info-item">
            <div class="item-label">小组组长：</div>
            <div class="item-content" v-html="filterText(obj.leaderNameOld,obj.leaderName)" />
          </section>
          <section class="info-item">
            <div class="item-label">小组分类：</div>
            <div class="item-content" v-html="filterText(obj.classifyNameOld,obj.classifyName)" />
          </section>
          <section class="info-item">
            <div class="item-label">小组logo：</div>
            <div class="item-content logo">
              <el-image
                v-if="obj.groupLogoOld!==obj.groupLogo"
                class="cover-image"
                :src="view + obj.groupLogoOld"
                :preview-src-list="[view + obj.groupLogoOld]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <i v-if="obj.groupLogoOld!==obj.groupLogo" style="font-size: 50px;margin: 0 20px;color: red;" class="el-icon-right" />
              <el-image
                class="cover-image"
                :src="view + obj.groupLogo"
                :preview-src-list="[view + obj.groupLogo]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </div>
          </section>
          <section v-if="obj.commitType==='TYPE_XZCL'" class="info-item">
            <div class="item-label">小组简介：</div>
            <div class="item-content desc-wrap">{{ obj.groupSummary||'' }}</div>
          </section>

        </section>
        <!-- 成员审核 -->
        <section v-if="obj.commitType==='TYPE_CYSH'" class="card-info">
          <section class="info-item">
            <div class="item-label">小组名称：</div>
            <div class="item-content">{{ obj.groupName||'' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">用户姓名：</div>
            <div class="item-content">{{ obj.userRealName||'' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">用户性别：</div>
            <div class="item-content">{{ obj.userSex==='MAN'?'男':'女'||'' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">用户手机号：</div>
            <div class="item-content">{{ handleDecrypt( obj.userPhone) }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">用户身份证：</div>
            <div class="item-content">{{ handleDecrypt( obj.userIdnumber) }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">用户部门：</div>
            <div class="item-content">{{ obj.deptName||'' }}</div>
          </section>
        </section>
        <!-- 小组解散-->
        <section v-if="obj.commitType==='TYPE_XZJS'" class="card-info">
          <section class="info-item">
            <div class="item-label">小组名称：</div>
            <div class="item-content">
              {{ obj.groupName }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">申请人：</div>
            <div class="item-content">
              {{ obj.param4 }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">申请时间：</div>
            <div class="item-content">
              {{ obj.commitTime }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">解散原因：</div>
            <div class="item-content">
              {{ obj.commitContent }}
            </div>
          </section>
        </section>
        <!-- 移交小组-->
        <section v-if="obj.commitType==='TYPE_XZYJ'"class="card-info">
          <section class="info-item">
            <div class="item-label">小组名称：</div>
            <div class="item-content">
              {{ obj.groupName }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">原组长：</div>
            <div class="item-content">
              {{ obj.param4 }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">新组长：</div>
            <div class="item-content">
              {{ obj.param6 }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">申请时间：</div>
            <div class="item-content">
              {{ obj.commitTime }}
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">移交原因：</div>
            <div class="item-content">
              {{ obj.commitContent }}
            </div>
          </section>
        </section>
      </el-card>

      <el-card class="main-card" style="margin-top: 10px;">
        <section slot="header" class="clearfix">
          <span>审核</span>
        </section>
        <el-form :model="form" :rules="rules" label-position="right" label-width="110px">
          <el-form-item v-if="type==='view'" label="提交人">
            {{ obj.commitName||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="提交人手机号">
            {{ handleDecrypt(obj.commitPhone) ||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="提交人部门">
            {{ obj.commitDeptName||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="审核人">
            {{ obj.auditUserName||'' }}
          </el-form-item>
          <el-form-item v-if="type==='view'" label="审核时间">
            {{ obj.auditTime||'' }}
          </el-form-item>
          <el-form-item label="审核状态" prop="auditResult">
            <el-radio-group v-model="form.auditResult" :disabled="type === 'view'">
              <el-radio v-for="(item, index) in dict.AUDITRESULT" :key="index" :label="item.dictValue">{{
                item.dictName
              }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核说明">
            <el-input
              v-model="form.auditExplain"
              :disabled="type == 'view'"
              :autosize="{ minRows: 4, maxRows: 6}"
              type="textarea"
              placeholder="请输入审核说明"
            />
          </el-form-item>
        </el-form>
      </el-card>
    </section>

    <div class="check-footer">
      <el-button style="padding: 8px 30px;" @click="handleCancel">返 回</el-button>
      <el-button v-if="type==='check'" style="padding: 8px 30px;" type="primary" @click="handleSubmit('back')">
        提交
      </el-button>
      <el-button
        v-if="type !== 'view'"
        style="padding: 8px 30px;"
        type="primary"
        @click="handleSubmit('next')"
      >
        提交并审核下一条
      </el-button>
    </div>
  </section>
</template>
<script>
import { get, audit } from '../api/check'
import CryptoJS from '@/utils/aesJiaJM'
export default {
  name: 'GroupCheckDetail',
  data() {
    return {
      i: '', // 数据id
      type: '', // 页面类型，check：审核，view：查看
      tab: '',
      list: [],
      obj: {
      },
      form: {
        auditResult: '',
        auditExplain: ''
      },
      rules: {
        auditResult: [{ required: true, message: '请选择审核状态', trigger: 'blur' }]
      },
      view: '/API-DOCUMENT/document/file/download?id=',
      dict: {
        AUDITRESULT: [
          {
            'dictValue': 'AUDITRESULT01',
            'dictName': '待审核'
          },
          {
            'dictValue': 'AUDITRESULT02',
            'dictName': '审核通过'
          },
          {
            'dictValue': 'AUDITRESULT03',
            'dictName': '审核不通过'
          }
        ] // 审核状态
      }
    }
  },
  created() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    if (this.$route.query.tab) {
      this.tab = this.$route.query.tab
    }
    if (this.$route.query.i) {
      this.i = this.$route.query.i || ''
      if (this.$route.query.type) {
        this.type = this.$route.query.type
      }
      this.getData()
    } else {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
    }
  },
  methods: {
    filterText(oldVal, newVal) {
      if (oldVal === newVal) {
        return newVal
      } else {
        return `${oldVal}更改为<span style="color:red;">${newVal}</span>`
      }
    },
    /**
     * 解密
     */
    handleDecrypt(str) {
      return str ? CryptoJS.$aesJieM(str) : ''
    },
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.i }).then(res => {
          loading.close()
          if (res.data.data.commitType === 'TYPE_XZJS') {
            this.obj = res.data.data
          } else {
            try {
              const infoJson = res.data.data.commitContent && res.data.data.commitType !== 'TYPE_XZYJ' ? JSON.parse(res.data.data.commitContent) : ''
              const data = res.data.data
              if (data.commitType === 'TYPE_XZCL' || data.commitType === 'TYPE_XZXG') {
                Array.from(infoJson).forEach(item => {
                  data[item.key + 'Old'] = item.valueOld ? item.valueOld : item.value
                  data[item.key] = item.value ? item.value : item.valueOld
                })
              }
              if (data.commitType === 'TYPE_XZCL' || data.commitType === 'TYPE_XZXG' || data.commitType === 'TYPE_CYSH') {
                this.obj = Object.assign(data, infoJson)
              } else {
                this.obj = data
              }
            } catch (err) {
              console.log('err', err)
            }
          }
          this.form = {
            auditResult: res.data.data.auditStatus || 'AUDITRESULT01',
            auditExplain: res.data.data.auditRemark || ''
          }
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    handleCancel() {
      this.$router.replace(`${this.$filterPath('groupCheckList')}?tab=${this.tab}`)
    },

    handleSubmit(type) {
      if (this.type === 'view') {
        this.handleCancel()
      } else {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        return new Promise((resolve, reject) => {
          audit({
            id: this.i,
            auditStatus: this.form.auditResult,
            auditRemark: this.form.auditExplain
          }).then(res => {
            loading.close()
            this.$message({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                if (type === 'back') {
                  this.$router.back()
                } else {
                  if (res.data.data) {
                    this.i = res.data.data || ''
                    this.getData()
                  } else {
                    this.$message({
                      title: '',
                      message: '已全部审核完成',
                      type: 'success',
                      duration: 1000,
                      onClose: () => {
                        this.handleCancel()
                      }
                    })
                  }
                }
              }
            })
            resolve()
          }).catch(error => {
            loading.close()
            reject(error)
          })
        })
      }
    }
  }
}
</script>
<style lang="scss">
.group-check-detail {
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;

  .check-main {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 52px;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;

    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    &:hover {
      overflow: auto;
    }

    .card-info {
      .info-item {
        padding-bottom: 8px;
        vertical-align: top;
        display: flex;

        .item-label {
          color: rgba(0, 0, 0, 1);
          font-weight: 400;
          font-size: 14px;
          line-height: 1.5715;
          text-align: start;
        }

        .item-content {
          flex: 1 1;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 1.5715;
          word-break: break-word;
          overflow-wrap: break-word;
          &.logo{
            display: flex;
            align-items: center;
          }
          .item-image {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }

          .el-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;

            .image-slot {
              background-color: #f5f7fa;
            }
          }
        }
      }
    }
  }

  .check-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
